<template>
    <div class="container">
        <el-dialog title="区域设置货架" :visible.sync="dialog.centerDialogVisible" width="30%" center :lock-scroll="true"
            @open="getOrg" @close="hideDialog">
            <el-form ref="regions" :rules="rules" :model="regions" label-width="100px" label-position="left">
                <el-form-item label="货架名称：" prop="name">
                    <el-select style="margin-bottom: 5px" v-model="search.organization" :multiple="false" filterable
                        clearable remote center reserve-keyword placeholder="请选择货架" :remote-method="organizationMethod"
                        :loading="insides.loading">
                        <el-option v-for="item in insides.option" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="货架编码：" prop="number">
                    <el-input v-model="regions.number" placeholder="请输入货架编码" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import { bindAreaShelves, selectChooseShelves } from "@/api/warehouse/warehouse";
    import store from "@/store";
    export default {
        props: {
            dialog: Object,
            regions: Object,
        },
        data() {
            return {
                rules: {
                    number: [{ required: true, message: "货架编码不能为空", trigger: "blur" }],
                },
                shelves: [],
                search: {
                    organization: "",
                },
                insides: {
                    innerVisible: false,
                    option: [],
                    value: "",
                    list: [],
                    loading: false,
                },
            };
        },

        methods: {
            getOrg(name = "") {
                let data = {
                    name
                };
                //获取机构
                selectChooseShelves(data).then((res) => {
                    if (res.data) {
                        this.insides.option = res.data.data.map((item) => {
                            return { value: `${item.id}`, label: `${item.name}` };
                        });
                    }
                });
            },
            //获取机构数据
            organizationMethod(query) {
                if (query !== "") {
                    this.getOrg(query);
                } else {
                    this.insides.option = [];
                }
            },

            hideDialog() {
                this.dialog.centerDialogVisible = false;
                this.$refs["regions"].resetFields();
            },

            //提交
            confirm() {
                this.$refs["regions"].validate((valid) => {
                    if (this.search.organization.length > 0) {
                        this.shelves = [{ goods_shelves_id: this.search.organization, goods_shelves_code: this.regions.number }];
                        console.log(this.shelves, 9999)
                        if (valid) {
                            let data = {
                                id: this.regions.id,
                                shelves: JSON.stringify(this.shelves),
                            };
                            bindAreaShelves(data)
                                .then((res) => {
                                    if (res.code == 0) {
                                        this.$message({
                                            message: res.msg,
                                            type: "success",
                                        });
                                        this.search.organization = "";
                                        this.hideDialog();
                                        this.$emit("upData");
                                    } else {
                                        this.$message({
                                            message: res.msg,
                                            type: "error",
                                        });
                                    }
                                })
                                .catch((err) => {
                                    console.log(err);
                                });

                        }

                    } else {
                        this.$message({
                            type: "success",
                            message: '请选择货架',
                        });
                    }

                });
            },
            //取消
            cancel() {
                this.hideDialog();
            },
        },
    };
</script>